<div id="schoolrouter-innerpage-data">
  <section class="bg-gray-50">
    <div class="max-w-4xl 2xl:max-w-5xl mx-auto p-6">
      <div class="mt-4">
        <%= link_to calendar_events_school_course_path(course, calendar_id: params[:calendar_id]), class: 'bg-gray-200 px-3 py-1.5 text-black rounded-2xl text-sm hover:bg-gray-300 focus:outline-none focus:bg-gray-100 focus:ring-1 focus:ring-focusColor-500 transition' do %>
          <i class="if i-arrow-left-regular if-fw rtl:rotate-180" ></i>
          <%= t('shared.back_link') %>
        <% end %>
      </div>
      <h1 class="text-xl md:text-3xl font-bold mt-4">
        <%= event.persisted? ? t('.edit_event_heading', event_title: event.title) : t('.add_event_heading') %>
      </h1>
      <p class="text-sm font-medium text-gray-500 mt-1"><%= course.name %></p>
    </div>
  </section>
  <section class="bg-white" >
    <%= form_with model: event,
        url: event.persisted? ? school_calendar_event_path(event, calendar_id: params[:calendar_id])
        : school_course_calendar_events_path(course, calendar_id: params[:calendar_id]),
        class: "max-w-4xl 2xl:max-w-5xl mx-auto p-6" do |f| %>
      <div class="grid grid-cols-12 gap-4">
        <div class="col-span-10">
          <label>
            <span class="text-sm font-medium"><%= t(".title_label") %></span>
            <%= f.text_field :title, id:"eventTitle", placeholder: t(".title_placeholder"), required: true, class: "mt-1 text-sm block w-full border border-gray-300 py-3 px-4 rounded-md focus:outline-none focus:ring-1 focus:ring-focusColor-500"  %>
          </label>
        </div>
        <div class="col-span-2">
          <label>
            <span class="text-sm font-medium space-x-1">
              <span><%= t(".color_label") %></span>
              <span title="<%= t(".color_label_hint") %>">
                <i class="if i-question-circle-regular" aria-hidden="true"></i>
              </span>
            </span>
            <%= f.select :color, CalendarEvent.colors , { include_blank: false }, { class: "select mt-1 items-center bg-white border border-gray-300 text-sm w-full outline-none py-3 px-4 pe-10 rounded-md focus:outline-none focus:ring-1 focus:ring-focusColor-500" } %>
          </label>
        </div>
      </div>
      <div class="grid grid-cols-12 gap-4 mt-5">
        <div class="col-span-6">
          <label>
            <span class="text-sm font-medium"><%= t(".start_time_label") %></span>
            <%= f.datetime_field :start_time, default: Time.current, required: true, class: "mt-1 text-sm block w-full border border-gray-300 outline-none py-3 px-4 rounded-md focus:outline-none focus:ring-1 focus:ring-focusColor-500" %>
          </label>
        </div>
        <div class="col-span-6">
          <label>
            <span class="text-sm font-medium"><%=t(".calendar_label")%></span>
            <%= f.select :calendar_id, options_from_collection_for_select(course.calendars, 'id', 'name', selected: (@event.calendar_id || params[:calendar_id])), { include_blank: false }, { class: "select mt-1 block w-full rounded-md bg-white border border-gray-300 py-3 px-4 pe-10 text-base focus:outline-none focus:ring-1 focus:ring-focusColor-500 sm:text-sm" } %>
          </label>
        </div>
      </div>
      <div class="pt-8">
        <div>
          <p class="text-sm font-semibold"><%=t(".add_link_section_title")%></p>
          <p class="text-sm text-gray-500"><%=t(".add_link_section_subtitle")%></p>
        </div>
        <div class="flex gap-5 items-center mt-3">
          <label class="block flex-1">
            <span class="text-sm font-medium"><%= t(".link_title_label") %></span>
            <%= f.text_field :link_title, placeholder: t(".link_title_placeholder"), class: "mt-2 text-sm block w-full border border-gray-300 outline-none py-3 px-4 rounded-md focus:outline-none focus:ring-1 focus:ring-focusColor-500"  %>
          </label>
          <label class="block flex-1">
            <span class="text-sm font-medium"><%= t(".link_url_label") %></span>
            <%= f.url_field :link_url, placeholder: t(".link_url_placeholder"), class: "mt-2 text-sm block w-full border border-gray-300 outline-none py-3 px-4 rounded-md focus:outline-none focus:ring-1 focus:ring-focusColor-500"  %>
          </label>
        </div>
      </div>
      <div class="pt-5">
        <label class="text-sm font-medium">
          <span><%= t(".description_label") %> <span class="font-light">(<%= t("shared.optional") %>)</span></span>
        </label>
        <div class="mt-1" data-re-component="SimpleMarkdownEditor" data-re-json="<%= { value: event.description || "", textAreaName: "calendar_event[description]", profile: "TextArea" }.to_json %>"></div>
      </div>
      <button type="submit" class="btn btn-primary btn-large w-full mt-5"><%= event.persisted? ? t(".update_event_button") : t(".add_event_button")%></button>
    <% end %>
  </section>
</div>
